<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">

    <style>

        /**盒子模型（框模型）*/

        .login-box{
            margin-top: 300px;
            margin-left: 200px;
        }


        .dark-mode {
            background-color: #454d55!important;
            color: #fff;
        }

        .dark-light{
            background-image: url("../img/bg1.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            color: #fff;
        }

        .dark-glass{
            background-color: #31677f!important;
            opacity: .9;
        }

    </style>
</head>
<body class="dark-light">
 <div class="container">
      <!
        模态窗体
        --https://v3.bootcss.com/javascript/#modals
       -->

      <!--外三层，内三层-->
      <!-- div.modal + tab-->
      <div class="modal show login-box">
          <div class="modal-dialog">
              <div class="modal-content dark-glass">
                  <!--内三层
                          modal-header 、 modal-body 、modal-footer
                   -->
                   <div class="modal-header">
                       <h2 class="login-header">
                           智慧人事-
                           <small>
                               系统登录
                           </small>
                       </h2>
                   </div>
                  <div class="modal-body">
                      <form  class="form-horizontal">
                             <!--row-->
                          <div class="form-group"> <!--row-->
                              <label class="col-md-4 control-label">用户名:</label>
                              <div  class="col-md-8">
                                  <input class="form-control" id="username"/>
                              </div>
                          </div>
                          <!--row-->
                          <div class="form-group"> <!--row-->
                              <label class="col-md-4 control-label">密码:</label>
                              <div  class="col-md-8">
                                  <input class="form-control" type="password" id="password"/>
                              </div>
                          </div>

                      </form>
                  </div>

                  <div class="modal-footer">
                      <!--
                           btn-success btn-danger btn-warning
                           btn-info btn-primary
                      -->

                          <div class="col-md-offset-4">
                              <button class="btn  btn-success" id="btnLogin" style="width: 100%">登录</button>
                              <div id="err">用户名或者密码错误，请重新登录！</div>
                          </div>
                  </div>


              </div>
          </div>
      </div>



 </div>



</body>
<script src="../lib/jquery.js"></script>
<script>

    $('#err').hide();
   $('#btnLogin').bind('click',btnLoginClick);

   function btnLoginClick() {
        $.ajax({
            url:'../mock/user.json',
            method:'get', // get post
            dataType:'json',
            success:function (data) {
                var user = {
                    username:$('#username').val(),
                    password:$('#password').val()
                }
              var current=  data.find(function (item) {
                    return item.username == user.username && item.password == user.password;
                })
                if(current){
                    window.location.href = "index.html";
                }else{
                    $('#err').show(1500);
                }
            }
        })

   }


</script>
</html>
